<template>
<div class="container">
    <img class="img1" src="../../assets/image/commentImg/ticketBg.png" alt="#">
    <div class="div1">
        <div class="top">
            <!-- 钱数 -->
            <div class="top1">￥<em>100</em></div>
            <!-- 钱数右侧的信息模块 -->
            <div class="top2">
                <div class="top2_1"><em>满30元减10元</em></div>
                <div class="top2_2"><div>立即领取</div></div>
                <div style="clear:both"></div>
                <div class="top2_3">2019.08.16-2019.08.30</div>
                
            </div>
        </div>
        <div class="bottom">全场通用，满场通用，满多少减多好，走过路不要错过多少减多好，走过路不要错过</div>
    </div>
</div>
</template>

<script>
export default {
    name: "container"
}
</script>

<style scoped>
.container {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;

}

.img1 {
    height: 3rem;
    width: .8rem;
    float: left;
}

.div1 {
    float: left;
    height: 3rem;
    width: 70%;
    border: 1px solid black;

}
.top{
    height: 2rem;
    width: 100%;
}
.top1{
    height: 2rem;
    width: 20%;
    float: left;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top1>em{
    font-size: .6rem;
    color:#4AA4FC;
}

.top2{
    height: 2rem;
    width: 80%;
    float: left;
    color: #4AA4FC;
    font-size: .3rem;
}
.top2_1{
    float: left;
    width: 60%;
    height: .7rem;
    font-size: .4rem;
    margin-top: .5rem;
    
}
.top2_2{
    float: left;
    width: 35%;
    height: .7rem;
    margin-top: .5rem;
    
}
.top2_2>div{
    height: .6rem;
    min-width: 1.6rem;
    border-radius: .2rem;
    color: #4AA4FC;
    font-weight: 900;
    font-size: .4rem;
    border: 1px solid #4AA4FC;
}
.top2_3{
    height: 1rem;
    width: 100%;
    font-size: .4rem;
    margin-top:.2rem;
}
.bottom{
    border-top:1px solid #eee;
    width: 100%;
    height: 1rem;
}
</style>
